<template>
  <div class="search-bar-container">
    <!-- 搜索功能和搜索按钮 -->
    <div class="search-filter-container">
      <div class="search-box-container">
        <div class="search-box">
          <input
              v-model="query"
              @keyup.enter="onEnter"
              type="search"
              placeholder="搜索内容"
              class="search-input"
          />
        </div>
        <button class="search-pink-button" @click="onEnter">
          <span class="search-text">搜索</span>
          <span class="search-icon">🔍</span>
        </button>
      </div>
    </div>

    <!-- 一级筛选栏 -->
    <div class="filter-tabs">
      <div
          class="filter-tab"
          :class="{ active: activeFilter === 'all' }"
          @click="handleFilterClick('all')"
      >
        全部
      </div>
      <div
          class="filter-tab"
          :class="{ active: activeFilter === 'image' }"
          @click="handleFilterClick('image')"
      >
        图文
      </div>
      <div
          class="filter-tab"
          :class="{ active: activeFilter === 'video' }"
          @click="handleFilterClick('video')"
      >
        视频
      </div>
      <div
          class="filter-tab"
          :class="{ active: activeFilter === 'user' }"
          @click="handleFilterClick('user')"
      >
        美妆
      </div>
            <div
          class="filter-tab"
          :class="{ active: activeFilter === 'user' }"
          @click="handleFilterClick('user')"
      >
        用户
      </div>
    </div>

    <!-- 二级筛选栏 -->
    <div class="sub-filter-tabs" v-if="showSubFilters">
      <div
          class="sub-filter-tab"
          v-for="(tag, index) in subFilterTags"
          :key="index"
          :class="{ active: activeSubFilter === tag }"
          @click="handleSubFilterClick(tag)"
      >
        {{ tag }}
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, defineEmits } from "vue";

const query = ref("");
const activeFilter = ref("all");
const activeSubFilter = ref("");
const showSubFilters = ref(false);

const emit = defineEmits<{
  (e: "search", value: string): void;
  (e: "update:activeFilter", value: string): void;
  (e: "update:activeSubFilter", value: string): void;
  (e: "update:showSubFilters", value: boolean): void;
}>();

// 模拟的二级筛选标签
const subFilterTags = ref([
  "综合", "高级干净", "甜豆", "韩妆日常", "清冷感", "氛围感", "御姐教程", "千金", "轻泰式", "小烟熏", "轻欧美"
]);

// 搜索框功能
const onEnter = () => {
  emit("search", query.value.trim());
};

// 筛选功能
const handleFilterClick = (filter: string) => {
  emit("update:activeFilter", filter);

  // 根据选择的筛选类型进行处理
  if (filter === "all") {
    // 如果选择“全部”，则隐藏子筛选并重置子筛选值
    emit("update:showSubFilters", false);
    activeSubFilter.value = ""; // 重置子筛选
    console.log("已切换到全部筛选");
  } else if (filter === "image") {
    // 如果选择“图文”，显示子筛选
    emit("update:showSubFilters", true);
    console.log("已切换到图文筛选");
    // 跳转到图文筛选页面的逻辑
    window.location.href = `/image-filter?query=${query.value.trim()}&filter=${filter}`;
  } else if (filter === "video") {
    // 如果选择“视频”，显示子筛选
    emit("update:showSubFilters", true);
    console.log("已切换到视频筛选");
    // 跳转到视频筛选页面的逻辑
    window.location.href = `/video-filter?query=${query.value.trim()}&filter=${filter}`;
  } else if (filter === "user") {
    // 如果选择“用户”，显示子筛选
    emit("update:showSubFilters", true);
    console.log("已切换到用户筛选");
    // 跳转到用户筛选页面的逻辑
    window.location.href = `/user-filter?query=${query.value.trim()}&filter=${filter}`;
  }
};

// 子筛选点击处理
const handleSubFilterClick = (tag: string) => {
  emit("update:activeSubFilter", tag);
  console.log(`已选择子筛选: ${tag}`);
  // 在这里可以添加子筛选相关的跳转逻辑
  window.location.href = `/sub-filter?query=${query.value.trim()}&filter=${activeFilter.value}&sub_filter=${tag}`;
};
</script>

<style src="./SearchBar.css"></style>